<template>
  <div style="">
      <transition name="el-zoom-in-center">
          <div v-show="!showMessage">
              <!-- wx联系人 -->
                  <div v-show="show" class="contentBoxWx" @scroll="throttleFn" ref="lianxiren">
                      <div class="headerWX">
                          <div style="text-align: center;font-weight: bold;font-size: 18px;">{{ titleName }}</div>
                          <div v-if="titleName=='陌陌'"  style="padding:0 10px;margin-top:5px;"><el-input v-model="searchWord" @keyup.enter.native="onSearchStart1"  placeholder="请输入关键词按回车搜索陌陌"></el-input></div>
                      </div>
                      <!-- 聊天对象列表 -->
                      <div v-if="titleName=='陌陌'"  class="wxUserItem" v-for="(item,index) in friendListData" :key="index" @click="opemMessageDetials(item,0)">
                          <img style="border-radius: 10px;margin-left:10px;" :src="item.avatar?item.avatar:srcLogo" width="55" height="55" alt="头像">
                          <div style="margin-left: 10px;width: 221px;">
                              <div class="textwx" style="font-weight: bold;"><span v-if="item.nick">{{ item.nick }}</span><span v-if="item.remark">({{ item.remark }})</span></div>
                              <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                  {{ item.username }}
                              </div>
                          </div>
                          <div class="dateTime">{{$t('wechat.number')}}:{{item.cnt}} </div>
                      </div>
                      <div class="loadingBox" v-if="showLoading" style="color:#2196f3;text-align: center;margin-top:20px;margin-bottom:20px;"><i :class="loadClass" style="color:#2196f3;margin-top: 30px;margin-bottom:30px;"></i> {{ loadingText }}</div>
                  </div>
              <!-- wx我的 -->
              
              <div v-show="!show" class="contentBoxWx">
                  <div class="selfInfo">
                      <img :src="srcLogo" style="border-radius: 5px;" width="70" height="70" alt="">
                      <div class="" style="margin-left:15px;">
                          <div style="font-size:20px;margin-bottom:5px;font-weight: bold;">{{ accountData.nick }}</div>
                          <div>陌陌号：{{ accountData.accountname?accountData.accountname:accountData.nick }}</div>
                          <div>地区：{{ accountData.province+'-'+accountData.city}}</div>
                          <div> {{$t('wechat.phone')}}：{{ accountData.phone}}</div>
                      </div>
                  </div>
                  <div class="list" style="margin-top:20px;">
                      <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><i class="el-icon-user-solid"></i> {{$t('wechat.friend')}}({{accountData.cnt}})</div>
                  </div>
              </div>

              <div class="flooterBox" >
              <div class="btn2" @click="openContent('陌陌')">
                  <img :src="src" width="45" height="45" alt="">
              </div>
              <div class="btn2" @click="openContent('我的')">
                  <img :src="srcSelf"  width="45" height="45" alt="">
              </div>
          </div>
          </div>
      </transition>
      <transition name="el-zoom-in-center">
          <!-- 聊天内容 -->
          <div v-show="showMessage">
              <div class="headerMessage" v-show="!showSearchList">
                  <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="black()"><i class="el-icon-arrow-left"></i></div>
                  <div v-if="titleName=='陌陌'" style="width: 70%;text-align: center;font-weight: bold;">{{chatWithObj.remark?chatWithObj.remark:chatWithObj.nick}}</div>
                  <!-- <el-button class="dayin" style="" type="text" @click="printChildren" :title="$t('wechat.openPrint')" ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
                  <!-- <div class="searchWX" :title="$t('wechat.searchKey')" ref="showSearchIcon" @click="openSearch" ><i class="el-icon-search"></i></div> -->
                  <transition name="el-zoom-in-top">
                      <div v-show="showSearchBox" ref="myDiv" class="searchWXContent">
                          <el-input class="searchInputWX" v-model="messageSearchWord"  @keyup.enter.native="searchWeChatMessage()" placeholder="输入关键词按回车键搜索聊天内容"></el-input>
                      </div>
                  </transition>
              </div>
              <!-- 内容区 -->
              <div v-show="!showSearchList">
                  <otherMessage ref="wechatBox" v-if="titleName=='陌陌'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' />
              </div>
              <div v-if="showSearchList" style="padding:0 10px;">
                  <div class="headerMessage">
                  <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="blackMessageList()"><i class="el-icon-arrow-left"></i></div>
                  <div v-if="titleName=='陌陌'" style="width: 86%;text-align: center;font-weight: bold;">{{$t('wechat.chatcontent')}}</div>
              </div>
              <!-- 搜索内容区 -->
              <div class="searchContentBox">
                  <div class="remarkListItem" @click="flyRemarkMessageItem(item)" v-for="(item,index) in searchMessageListData" :key="index">
                      <div v-if="titleName=='陌陌'">
                          <img v-if="item.issend==0" :src="item.contactavatar" alt="" width="50" height="50">
                          <img v-else-if="accountData.avatar" :src="accountData.avatar" alt="" width="50" height="50">
                      </div>
                      <div style="width:300px;padding-left:10px;">
                          <div style="color:#bdbdbd;position: relative;">
                              <span style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{ item.sendernick?item.sendernick:item.sendername }}</span>
                              <span style="position: absolute;right:0px;">
                                  {{ formateDate(item.msgtime) }}
                              </span>
                          </div>
                          <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" :title="item.contant" v-html="highlight(item.contant,messageSearchWord)"></div>
                      </div>
                  </div>
              </div>
                  
              </div>
          </div>
      </transition>
  </div>
</template>

<script>
import otherMessage from './otherMessage.vue'
import { throttle } from 'lodash';
import { parseTime } from '@/utils/index'
import { getOtherAppAccountInfo } from "@/api/otherApi/otherApp_api"
import { searchFunction } from '@/api/weChat/weChat_api'
export default {
  props:['sendData'],
  name: "momo",
  components:{
    otherMessage
  },
  data(){
      return{
          selectld:-1,
          selectType:0, //0下1上
          selectTime:-1,
          isExistsSelectID:1,

          searchMessageListData:[],
          showSearchList:false,
          messageSearchWord:'',
          showSearchBox:false,
          loadClass:'el-icon-loading',
          loadingText:'正在加载. . .',
          showLoading:false,
          srcLogo:require('../../../assets/images/otherApp/momo.jpg'),
          searchWord2:'',
          searchWord1:'',
          active:'陌陌',
          recovery:0,
          chatWithObj:'',
          accountData:'',
          friendListData:[],
          titleName:'陌陌',
          showMessage:false,
          show:true,
          searchWord:'',
          src:require('../../../assets/图标/QQ/qq消息蓝色.png'),
          srcSelf:require('../../../assets/图标/QQ/qq我.png'),
           // 好友
          offset:1,
          limit:15,
          total:0,
          // 群组
          groupOffset:1,
          groupLimit:10,
          totalGroup:0,
          // 公众号
          publicOffset:1,
          publicLimit:10,
          publicTotal:0,

          // 群成员
          groupModalOffset:1,
          groupModalLimit:20,
          groupModalTotal:0,

          // --------------------
          offsetLimit:''
      }
  },
  watch:{
  '$store.state.account.momo':function(){
    if(this.sendData.list_offset){
      if(this.sendData.app_name){
      //   this.tab='1'
        this.searchWord = this.sendData.app_name;
        this.offset=1;
        this.limit=this.sendData.list_limit;
      }else if(this.sendData.app_name=='群组'){
      //   this.tab='2'
        this.groupOffset=this.sendData.list_offset;
        this.groupLimit=this.sendData.list_limit;
        // this.onSearch2()
      }else{
      //   this.tab='3'
      }
    }else{
    // this.offset=1
    this.offset=1;
    this.offset=1;
    this.total=0;

    this.groupOffset=1;
    this.totalGroup=0;

    this.groupModalOffset=1;
    this.groupModalTotal=0;
    }
    this.showMessage = false;
    this.friendListData = [];

    this.openContent('陌陌');
    // this.init()
  }
},
created(){
  if(this.sendData.list_offset){
      if(this.sendData.app_name){
      //   this.tab='1'
        this.searchWord = this.sendData.app_name;
        this.offset=1;
        this.limit=this.sendData.list_limit;
      }else if(this.sendData.app_name=='群组'){
      //   this.tab='2'
        this.groupOffset=this.sendData.list_offset;
        this.groupLimit=this.sendData.list_limit;
        // this.onSearch2()
      }else{
      //   this.tab='3'
      }
    }else{
    // this.offset=1;
    this.offset=1;
    this.offset=1;
    this.total=0;

    this.groupOffset=1;
    this.totalGroup=0;

    this.groupModalOffset=1;
    this.groupModalTotal=0;
    }
    this.showMessage = false;
    this.friendListData = [];

    this.openContent('陌陌');
    // this.init()

},
mounted() {
  document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
  document.removeEventListener('click', this.handleClickOutside);
},
  methods:{
    printChildren(){
      this.$refs.wechatBox.openPrintModal();
    },
      flyRemarkMessageItem(item){
          switch (this.titleName) {
              case '陌陌':
              this.$refs.wechatBox.flayRemark(item);
              this.showSearchList = false;
                  break;
              case '群组':
              this.$refs.wechatGroupBox.flayRemarkGrop(item)
              this.showSearchList = false;
              break;
              default:
                  break;
          }

      },
      formateDate(date){
          return parseTime(date);
      },
      highlight(text, keyword) {
          let str = text;
          let newStr = str.replace(keyword, `<span class='highlight' style="color:red;">${keyword}</span>`);

          //使用正则表达式全局匹配关键字，将其用 <span> 标签包裹起来，并添加样式
          return newStr;

      },
      blackMessageList(){
          this.showSearchList = false;
      },
      searchWeChatMessage(){
          switch (this.titleName) {
              case '陌陌':
              let data='';

                  data={
                  proof_num:this.chatWithObj.proof_num,
                  account_id:this.chatWithObj.account_id,
                  contactid:this.chatWithObj.username,
                  model:'wechat',
                  recovery:this.recovery,
                  searchkey:this.messageSearchWord,
                  offset:this.offset,
                  limit:this.limit,
                  selectld:this.selectld,
                  selectType:this.selectType, //0下1上
                  selectTime:this.selectTime,
                  isExistsSelectID:this.isExistsSelectID
                  }

                  searchFunction(data,'/search/tencent/content_new').then(res=>{
                      this.searchMessageListData = res.data;
                      this.showSearchList = true;
                      // // this.$refs.wechatBox.onSearch(this.messageSearchWord);
                      // // this.messageSearchWord = '';
                      this.showSearchBox = false;
                  })
                  break;
              case '群组':
              let data1='';

                  data1={
                  proof_num:this.chatWithObj.proof_num,
                  account_id:this.chatWithObj.account_id,
                  contactid:this.chatWithObj.groupname,
                  model:'wechat',
                  recovery:this.recovery,
                  searchkey:this.messageSearchWord,
                  limit:this.limit,
                  selectId:this.selectld,
                  selectType:this.selectType, //0下1上
                  selectTime:this.selectTime,
                  isExistsSelectID:this.isExistsSelectID
                  }

                  searchFunction(data1,'/search/tencent/content_new').then(res=>{
                      this.searchMessageListData = res.data;
                      this.showSearchList = true;
                      this.showSearchBox = false;
                  })
              break;
          
              default:
                  break;
          }

      

      },
      handleClickOutside(event) {
          if (!this.$refs.myDiv.contains(event.target)) {
              // 在这里处理点击除元素外的其他地方触发事件的逻辑
              if(event.target._prevClass !=='el-icon-search' && event.target._prevClass !=='searchWX'){
                  this.showSearchBox = false;
              }else{
                  this.showSearchBox = !this.showSearchBox;
              }
          }
      },
      openSearch(){
          this.showSearchBox = this.showSearchBox;
      },
      throttleFn: throttle(function() {
          // 获取列表元素
          const list = this.$refs.lianxiren;
          // 判断滚动到底部
          if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
              this.showLoading=true;
               
              if(this.friendListData.length<this.total){
              this.loadClass = 'el-icon-loading';
              this.loadingText = '正在加载. . .';
              // 加载更多数据
              let that = this;
              setTimeout(()=>{
                  switch (that.titleName) {
                      case '陌陌':
                      that.offset++;
                      that.onSearch1();
                          break;
                      default:
                          break;
                  }
              },1000)
              }else{
              this.loadClass = 'el-icon-success';
              this.loadingText = '到底了，没有更多了！';
              }
          }
      },1000),
   handleScroll(){
    // 获取列表元素
    const list = this.$refs.lianxiren;
    // 判断滚动到底部
    if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
          this.showLoading=true;
           
      if(this.friendListData.length<this.total){
        this.loadClass = 'el-icon-loading';
        this.loadingText = '正在加载. . .';
        // 加载更多数据
        let that = this;
        setTimeout(()=>{
          switch (that.titleName) {
              case '陌陌':
              that.offset++;
              that.onSearch1();
                  break;
              default:
                  break;
          }
        },1000)
      }else{
        this.loadClass = 'el-icon-success';
        this.loadingText = '到底了，没有更多了！';
      }
    }
  },
  
  // 陌陌搜索
  onSearchStart1(){
      this.friendListData = []
      this.offset=1
      this.onSearch1()
  },


  // 查看陌陌好友聊天
  checkWeChatMessage(item,number,offset){
    this.offsetLimit={
      offset:this.offset,
      limit:this.limit,
      label:this.sendData.label,
      msg_offset:offset,
      // recovery:this.sendData.recovery
    }
    // this.recovery=number
    // this.total=res.data[0].cntlog(item)
    this.$store.commit('SET_OTHERDATA',Date.parse(new Date()));
    this.chatWithObj=item
    sessionStorage.setItem('flag','friend')
  //   this.showMessageList=true
  //   this.showGroup=false
  //   this.showPublic=false
  },

  // 初始化请求     账号信息
  init(){
      let nodeData=JSON.parse(sessionStorage.getItem('sumData'))
      let data={
        proof_num:this.sendData.proof_num,
              account_id:Number(this.sendData.account_id),
              username:this.sendData.label,
      }
      getOtherAppAccountInfo(data).then(res=>{
          this.accountData=res.data[0]
          this.onSearch1()
         
      })
  },
  onSearch1(b) {
    if(sessionStorage.getItem('searchAll')!==null){
      this.searchWord = sessionStorage.getItem('searchAll');
    }

      this.showSearchBox = false;
      let data={
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            searchkey:this.searchWord,
            offset:this.offset,
            limit:this.limit
      }
    searchFunction(data,'/search/chat/contact').then(res=>{
      this.showLoading=false;

      //   this.$refs.friendList.scrollTop=0
      for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
        this.friendListData.push(element)
      }

        this.total=res.data[0].totle
        if(this.sendData.list_offset){
      if(this.sendData.app_name){
        this.friendListData.forEach(element=>{
          if(element.username==this.sendData.app_name){
            this.opemMessageDetials(element,0,this.sendData.msg_offset)
          }
        })
      }else{

      }
  }
    }).catch(err=>{
    })
  },

   openContent(number){
      this.friendListData = [];
      this.offset = 1;
      this.groupOffset = 1;
      this.publicOffset = 1;
          switch (number) {
              case '陌陌':
              this.show=true;
              this.titleName = '陌陌'

              this.src = require('../../../assets/图标/QQ/qq消息蓝色.png')

              this.srcSelf=require('../../../assets/图标/QQ/qq我.png')
              this.init()
                  break;
              case '我的':
              this.show=false;
              this.srcSelf=require('../../../assets/图标/QQ/qq蓝色我.png')

              this.src = require('../../../assets/图标/QQ/qq消息.png')
                  break;
              default:
                  break;
          }
      },
      opemMessageDetials(item,number,offset){
          this.showMessage = true;
          this.offsetLimit={
              offset:this.offset,
              limit:this.limit, 
              label:this.sendData.label,
              msg_offset:offset,
              recovery:this.sendData.recovery
          }
          this.recovery=number
          // this.total=res.data[0].cntlog(item)
          this.$store.commit('SET_OTHERDATA',Date.parse(new Date()));
          this.chatWithObj=item
          sessionStorage.setItem('flag','friend')
      },
      black(){
          this.showMessage = false;
          this.messageSearchWord = ''
          // this.$refs.wechatBox.clearMessage();
      }
  }
}
</script>

<style scoped>
.searchContentBox{
  height: 740px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.searchContentBox::-webkit-scrollbar {
width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.searchContentBox::-webkit-scrollbar-track {
background-color: rgb(252, 252, 252);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/* <!--修改 滑块 --> */
.searchContentBox::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.highlight {
color: red;
}
.remarkListItem{
  cursor: pointer;
  display: flex;
  height: 70px;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 10px;
  /* justify-content: space-between; */
  align-items: center;
}
.searchInputWX{
  margin-top: 20px;
  
}

.headerMessage{
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  font-size: 20px;
  position: relative;
}
.searchWX{
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.searchWX:hover{
  color: #38c5f9;
  font-weight: bold;
}
.searchWXContent{
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  /* border: 1px solid red; */
  position: absolute;
  top: 50px;
  padding: 5px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index:1000;
}
.list>div{
  padding-left:20px;
}
.selfInfo{
  height: 170px;
 
  padding: 10px 20px;
  display: flex;
  align-items: center;
}
.headerWX{
  position: fixed;
    height: 80px;
    border-bottom: 1px solid rgb(224, 224, 224);
    z-index: 1000;
    width: 448px;
    top: 34px;
    background: #fff;
}
.dateTime{
  position: absolute;
  top: 14px;
  right: 10px;
  color: #bdbdbd;
}
.textwx{
  width: 180px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.wxUserItem{
  height: 70px;
  border-bottom: 1px solid rgb(242, 242, 242);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.wxUserItem:hover{
  background: #eeeeee;
}
.contentBoxWx{
  height: 820px;
  overflow-y: auto;
  padding-top:80px;
}

.contentBoxWx::-webkit-scrollbar {
width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.contentBoxWx::-webkit-scrollbar-track {
background-color: rgb(252, 252, 252);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/* <!--修改 滑块 --> */
.contentBoxWx::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.flooterBox{
  display: flex;
  padding-bottom: 20px;
  border-top: 1px solid #e4e4e4;
}
.btn2{
  width: 50%;
  text-align: center;
  cursor: pointer;
}
.btn2>img{
  display: block;
  margin:0 auto;
}
@media (min-width: 2360px) and (max-width: 2560px) {
    .contentBoxWx{
      height:  83vh;
      position: relative;
    
  }
}
/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2561px) {
  .contentBoxWx{
  height:  70vh;
 
}
.headerWX{
    position: fixed;
    height: 80px;
    border-bottom: 1px solid rgb(224, 224, 224);
    z-index: 1000;
    width: 528px;
    top: 34px;
    background: #fff;
}
}
/* @media screen and (min-width: 3440px) {
    .contentBoxWx {
    width: 100%;
    height: 62vh;
    padding-bottom: 300px;
    overflow-y: auto;
  }

  } */
</style>